<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id ="app">

  <h1  style="color: red;"> 接受子组件传递过来的数据: {{name}} </h1>
  <ul v-if='books.length>0'>
    <li>{{books[0]}}</li>
    <li>{{books[1]}}</li>
</ul>
<div  v-else>   暂无数据...</div>

  <hr>

        <!--  第二步 接受 发送过来的自定义方法 @send-msg='父组件自己定义的方法' -->

        <com-a  @send-msg='receiveData'></com-a>

       
    </div>



    <template id='comA'>
        <div>
            <h1> 我是一个局部子组件</h1>
            <!--  第三步 直接使用  --> 
            
            <h1>  显示自己的子组件定义的数据:  {{msg}}</h1>
            <button  @click='sendMsg'> 点击发送数据到父组件</button>
           
           
        </div>


    </template>

    <script>


let comA={
    template:'#comA',
    data() {
        return {
            msg:'我是子组件定义的值 zs',
            list:['红楼梦','白日梦']
        }
    },
    methods:{
        //子组件向父组件发送数据 本质上是发送一个自定义的方法  $emit('第一个参数自定义方法的名字','第二个参数是需要传递的参数')
       sendMsg() {
        //    第一步 绑定 $emit 
        alert('send')

        // 传递数据如果 个数 大于2个以上 建议使用对象 
        let obj={
            msg:this.msg,
            list:this.list
        }

        this.$emit('send-msg',obj)
       }
    }
}


     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            name:'',
            books:[]
        },
        methods: {
            // 第三步 执行 父组件自己定义的方法
            receiveData(data) {
                console.log( 'data:', data);
                this.name=data.msg
                this.books=data.list

            }
        },
        components:{
            comA
        }
     });
    </script>
</body>

</html>